<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button @click="toDetail">查看明细</el-button>
        <!-- <el-button :disabled="!buttonsPermissions.DaoChu" :class="!buttonsPermissions.DaoChu ? 'disabled_button' : ''"
              @click="exportExcel">导出</el-button> -->
        <el-button
          :disabled="!buttonsPermissions.DaYin"
          :class="!buttonsPermissions.DaYin ? 'disabled_button' : ''"
          @click="handleShortcutKeyPrint"
          >打印(P)</el-button
        >
      </div>
      <div class="btn_right">
        <div style="display: flex;margin-right: 10px">
          <div class="item_title">统计方式</div>
          <div>
            <el-select v-model="queryData.type" style="width: 110px" @change="changeType">
              <el-option
                style="font-size: 12px"
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </div>
        <el-select @change="changeDate" v-model="monthValue">
          <el-option
            style="font-size: 12px"
            v-for="item in monthOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <!-- <div class="date_picker_style" v-if="isShowDate">
              <p>{{ queryData.dateRange.startDate }}~{{ queryData.dateRange.endData }}</p>
              <el-date-picker
                v-model="nowDate"
                type="daterange"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onClickPicker"
              >
              </el-date-picker>
              <i class="el-icon-date"></i>
            </div>-->
        <el-date-picker
          v-if="isShowDate"
          v-model="nowDate"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="onClickPicker"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-button type="primary" @click="onQuery">查询</el-button>
        <el-button @click="onRefresh">重置</el-button>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_table">
        <div class="table_content">
          <el-table
            ref="tableList"
            show-summary
            :summary-method="getSummaries"
            highlight-current-row
            :header-cell-style="{
              background: '#E3F6FF',
              color: '#666666',
              textAlign: 'center',
              height: '30px',
              borderColor: '#dddddd',
            }"
            :cell-style="{ textAlign: 'center' }"
            :data="tableData"
            height="100%"
            style="width: 100%"
            @row-click="onClickRow"
          >
            <el-table-column :resizable="false" label="序号" type="index" width="50"></el-table-column>
            <el-table-column :resizable="false" :label="hasTypeName">
              <template slot-scope="scope">
                <el-tooltip effect="dark" :content="scope.row.varName" :enterable="false" placement="top">
                    <div>{{ scope.row.varName }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <template v-for="(item, index) in columnData">
              <el-table-column
                :show-overflow-tooltip="true"
                :label="item.morenName"
                :prop="item.props"
                min-width="130px"
                :sortable="item.sortable"
                :key="index"
              >
                <template slot-scope="scope">
                  <span>{{ $formatMoney(scope.row[item.props]) }}</span>
                </template>
              </el-table-column>
            </template>
            <!-- <el-table-column :resizable="false" label="合计" width="100">
                <template slot-scope="scope">
                  <span>{{ $formatMoney(scope.row.totalPrice) }}</span>
                </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 打印 -->
    <dialog-print ref="print"></dialog-print>
  </div>
</template>
    
<script>
import { mapGetters } from 'vuex'
import { getAction, postAction, downPostFile } from '@/api/manage'
import { dateStrFromDate } from '@/utils/DateFormatter'
import { handlePermissions, handleOtherPerms } from '@/utils/index'
/**打印 */
import dialogPrint from '@/views/components/dialogPrintStatic'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { delcommafy } from '../../../utils'
export default {
  name: 'payDetailed',
  mixins: [JeecgListMixin],
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('收支统计表')
    },
    printPermissions() {
      return handleOtherPerms('单据可多次打印')
    },
    hasTypeName() {
      return this.queryData.type == '1' ? '业务员' : this.queryData.type == '2' ? '往来单位' : '部门'
    },
  },
  components: {
    dialogPrint,
  },
  created() {
    // 默认获取当月时间
    this.getTimeRange(this.$setTimeRange(5))
    this.getData()
    this.getExpenseList()
  },
  data() {
    return {
      // 查询条件数据
      queryData: {
        // 日期选择范围
        dateRange: {
          startDate: '',
          endData: '',
        },
        // 统计类别
        type: '1',
      },
      typeOptions: [
        {
          value: '1',
          label: '按业务员',
        },
        {
          value: '2',
          label: '按往来单位',
        },
        {
          value: '3',
          label: '按部门',
        },
      ],
      monthValue: '本月',
      monthOptions: [
        {
          value: '今日',
          label: '今日',
        },
        {
          value: '本周',
          label: '本周',
        },
        {
          value: '本月',
          label: '本月',
        },
        {
          value: '本年',
          label: '本年',
        },
      ],
      isShowDate: true, // 是否显示选择时间组件
      nowDate: [],
      // 表格数据
      tableData: [],
      // 列配置数据
      columnData: [],
      costNameId: '', // 选中的费用名称ID
      typeName: '', // 选中的费用名称类型
      total: 0,
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      url: {
        cashList: '/costOrder/analyze/spendDetail',
        exportExcel: '/financialstatements/cashBankStatistics/exportCountCashBankStatisticsXls',
      },
      pageName: '支出明细表',
    }
  },
  methods: {
    // 打印
    async handleShortcutKeyPrint() {
      // 查询
      // let data = {
      //   ...this.queryData,
      //   startDate: this.queryData.dateRange.startDate,
      //   endDate: this.queryData.dateRange.endData,
      //   pageNo: 1,
      //   pageSize: 1000000,
      // }
      if (this.queryData.type == '1') {
        this.pageName = '支出明细表-按业务员'
      }else if(this.queryData.type == '2'){
        this.pageName = '支出明细表-按往来单位'
      }else if(this.queryData.type == '3'){
        this.pageName = '支出明细表-按部门'
      }
      let printExclusive = this.tableData
      // const res = await postAction(this.url.cashList, data)
      // if (res.code == 200) {
      //   printExclusive = res.result.records || []
      // }
      // this.onQuery()
      // 打印
      let columnDataSF = [
        {
          morenName: '序号',
          sortable: true,
          props: 'idx',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
        },
        {
          morenName: '',
          sortable: true,
          props: 'varName',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
        },
        ...this.columnData
      ]
      if (!this.buttonsPermissions.DaYin) {
        this.$elMessage.warning('未拥有打印权限！')
      } else if (!printExclusive || printExclusive.length <= 0) {
        this.$elMessage.warning('没有要打印的记录！')
      } else {
        let printData = {
          riqi: this.queryData.dateRange.startDate + '~' + this.queryData.dateRange.endData,
          printExclusive,
        }
        // 可以多次打印设置
        if (this.printPermissions) {
          this.$refs.print.show(printData, columnDataSF, this.pageName)
        } else {
          if (this.$lcStorage.get('printLimitValue')) {
            // 获取打印次数
            this.getPrintNum(this.pageName, () => {
              this.$refs.print.show(printData, columnDataSF, this.pageName)
            })
          } else {
            this.$refs.print.show(printData, columnDataSF, this.pageName)
          }
        }
      }
    },
    // 导出
    exportExcel() {
      let data = {
        ...this.queryData,
        startDate: this.queryData.dateRange.startDate,
        endDate: this.queryData.dateRange.endData,
      }
      downPostFile(this.url.exportExcel, '支出明细表', data)
    },
    //获取费用名称列表
    getExpenseList() {
      this.columnData = []
      getAction('/costOrder/xghGeneralCostName/list', { pageSize: 999, costNameType: '1' }).then((res) => {
        if (res.code == 200) {
          res.result.records.forEach((item,index) => {
            this.columnData.push({
              morenName: item.costName,
              sortable: true,
              props: 'price'+index,
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
            })
          })
          this.columnData.push({
              morenName: '合计',
              sortable: true,
              props: 'totalPrice',
              zidingyiName: '',
              morenState: true,
              zidingyiState: true,
              noModify: false,
            })
          console.log(this.columnData)
        }
      })
    },
    // 获取数据
    getData() {
      let data = {
        ...this.queryData,
        startDate: this.queryData.dateRange.startDate,
        endDate: this.queryData.dateRange.endData,
        pageNo: this.currentPage,
        pageSize: this.pagesize,
      }
      getAction(this.url.cashList, data).then((res) => {
        if (res.code == 200) {
          let tableData1 = res.result.records
          tableData1.forEach(item =>{
            item.varValues.forEach((item1,index)=>{
              item['price'+index] = item1.price
            })
            delete item.varValues
          })
          this.tableData = tableData1
          this.total = res.result.total
        }
      })
    },
    // 查询
    onQuery() {
      let str = JSON.stringify(this.queryData)
      let arr = JSON.parse(str)
      arr.dateRange.startDate = arr.dateRange.startDate + ' 00:00:00'
      arr.dateRange.endData = arr.dateRange.endData + ' 23:59:59'
      let obj = {
        ...arr,
      }
      this.getExpenseList()
      this.currentPage = 1
      this.requestQuery(obj)
    },
    // 重置
    onRefresh() {
      Object.assign(this.$data.queryData, this.$options.data().queryData)
      this.monthValue = '本月'
      this.changeDate(this.monthValue)
      this.getData()
    },
    // 请求筛选条件数据
    requestQuery(obj) {
      this.getData()
    },
    changeType(val) {
      this.queryData.type = val
      this.onQuery()
    },
    // 判断当前选择时间段
    changeDate(val) {
      this.isShowDate = true
      switch (val) {
        case '全部':
          this.queryData.dateRange.startDate = ''
          this.queryData.dateRange.endData = ''
          this.isShowDate = false
          break
        case '今日':
          this.getTimeRange(this.$setTimeRange(1))
          break
        case '昨天':
          this.getTimeRange(this.$setTimeRange(2))
          break
        case '本周':
          this.getTimeRange(this.$setTimeRange(3))
          break
        case '上周':
          this.getTimeRange(this.$setTimeRange(4))
          break
        case '本月':
          this.getTimeRange(this.$setTimeRange(5))
          break
        case '上月':
          this.getTimeRange(this.$setTimeRange(6))
          break
        case '本年':
          this.getTimeRange(this.$setTimeRange(7))
          break
        case '去年':
          this.getTimeRange(this.$setTimeRange(8))
          break
        default:
          break
      }
    },
    // 获取时间范围并设置
    getTimeRange(data) {
      this.nowDate = [data.now, data.end]
      this.queryData.dateRange.startDate = data.now
      this.queryData.dateRange.endData = data.end
    },
    // 获取当前选中时间
    onClickPicker(val) {
      this.queryData.dateRange.startDate = val[0]
      this.queryData.dateRange.endData = val[1]
    },
    // 合计列计算
    getSummaries(param) {
      this.$nextTick(() => {
        this.$refs.tableList.doLayout()
      })
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + this.total + '条明细'
        } else {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            sums[index] = this.$formatMoney(sums[index])
          } else {
            sums[index] = ''
          }
        }
      })
      return sums
    },
    // 选中当前行
    onClickRow(row) {
      this.costNameId = row.id
      this.typeName = row.typeName
    },
    // 双击跳转
    // onRowDblclick(row) {
    //   if (row.typeName === '支出统计') {
    //     this.$router.push({
    //       path: '/reportStatistics/financeReport/payDetailed',
    //       query: {
    //         id: row.costNameId,
    //       },
    //     })
    //   } else {
    //     this.$router.push({
    //       path: '/reportStatistics/financeReport/collectDetailed',
    //       query: {
    //         id: row.costNameId,
    //       },
    //     })
    //   }
    // },
    // 跳转到收支统计明细
    toDetail() {
        this.$router.push({
          path: '/paymentManage/paymentRecord/billGeneralManage',
        })
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
  },
}
</script>
    
<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
}

.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  ::v-deep .el-button {
    width: 80px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    margin-right: 6px;
    margin-left: 0;
  }

  ::v-deep .el-select {
    width: 80px;
    height: 30px;
    box-sizing: border-box;
    margin-right: 6px;

    .el-input {
      .el-input__inner {
        height: 30px;
        border: none;
        font-size: 12px;
      }

      .el-input__suffix {
        height: 30px;
        display: flex;
        align-items: center;
      }
    }
  }

  // .date_picker_style {
  //   width: 3.375211rem;
  //   height: 30px;
  //   background: #ffffff;
  //   border: 1px solid #d9d9d9;
  //   opacity: 1;
  //   border-radius: 0.075005rem;
  //   position: relative;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   box-sizing: border-box;
  //   padding: 0.093756rem;
  //   margin-right: 6px;
  //   position: relative;
  //   p {
  //     width: 100%;
  //     height: 30px;
  //     margin: 0;
  //     font-size: 0.018751rem;
  //     color: #666;
  //     font-family: HelveticaNeue;
  //     color: #666666;
  //     line-height: 30px;
  //   }
  //   i {
  //     font-size: 0.25rem;
  //     color: #d9d9d9;
  //   }
  //   ::v-deep .el-date-editor {
  //     width: 3.375211rem;
  //     height: 30px;
  //     opacity: 0;
  //     position: absolute;
  //     top: 0;
  //     left: 0;
  //     z-index: 2001;
  //     .el-range-input {
  //       font-size: 12px;
  //     }
  //     .el-range-separator {
  //       line-height: 30px;
  //       font-size: 12px;
  //     }
  //   }
  // }
  ::v-deep .el-date-editor {
    width: 210px;
    height: 30px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    margin-right: 6px;
    padding: 3px 6px;

    .el-range__icon {
      position: absolute;
      right: 0;
      line-height: 30px;
    }

    .el-range-separator {
      line-height: 24px;
    }

    .el-range-input {
      font-size: 12px;
    }

    .el-range__close-icon {
      display: none;
    }
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    // width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .btn_right {
    // width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .item_title {
      padding: 0 15px;
      width: auto;
      min-width: 60px;
      line-height: 30px;
      color: #666666;
      text-justify: distribute-all-lines;
      /*ie6-8*/
      text-align-last: justify;
      /* ie9*/
      -moz-text-align-last: justify;
      /*ff*/
      -webkit-text-align-last: justify;
      /*chrome 20+*/
    }
    .el-button {
      width: 60px;
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}

.info_content_div {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
  box-sizing: border-box;
  padding: 12px 12px 0;
  display: flex;

  .div_table {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .table_content {
      height: calc(100% - 50px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            min-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
            white-space: nowrap;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 8px 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}
</style>